﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <title>叩丁狼CRM(演示版)</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <#include "../common/head.ftl"/>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" href="/css/core.css"/>
</head>
<body>
<#assign menu="customerEchart"/>
<div class="container " style="margin-top: 20px">
    <#include "../common/welcome.ftl"/>
    <div class="row">

        <#include "../common/menu.ftl"/>


        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">潜在客户报表</h1>
                </div>
            </div>

            <form class="form-inline" id="searchForm" action="/customerEchart/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <div class="form-group">
                    <label for="keyword">关键字:</label>
                    <input type="text" class="form-control" name="keyword"  placeholder="请输入客户姓名">
                </div>
                <div class="form-group">
                    <label >时间段:</label>
                    <input type="text" class="form-control"  name="beginDate"  placeholder="请输入起始日期">
                    ~
                    <input type="text" class="form-control"  name="endDate"  placeholder="请输入结束日期">
                </div>
                <div class="form-group">
                    <label for="dept">分组:</label>
                    <select class="form-control"  name="groupType">
                        <option value="e.name">销售员</option>
                        <option value="DATE_FORMAT(c.inputTime,'%Y')">年份</option>
                        <option value="DATE_FORMAT(c.inputTime,'%Y-%m')">月份</option>
                        <option value="DATE_FORMAT(c.inputTime,'%Y-%m-%d')">日期</option>
                    </select>
                </div>
                <button id="btn_query" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <a role="button"  class="btn btn-success barBtn">
                    <span class="glyphicon glyphicon-film"></span> 柱状图
                </a>
                <a role="button"  class="btn btn-success pieBtn">
                    <span class="glyphicon glyphicon-film"></span> 饼状图
                </a>
            </form>
            <script>
                //设置日期
                $(function () {
                    $("#searchForm input[name='beginDate']").click(function () {
                        new WdatePicker({
                            maxDate:$("#searchForm input[name='endDate']").val(),
                            readOnly:true
                        });
                    });
                    $("#searchForm input[name='endDate']").click(function () {
                        new WdatePicker({
                            minDate:$("#searchForm input[name='beginDate']").val(),
                            maxDate:new Date(),
                            readOnly:true
                        });
                    });
                    <#if qo??>
                        <#if qo.beginDate??>
                                $("#searchForm input[name='beginDate']").val("${qo.beginDate?string("yyyy-MM-dd")}");
                        </#if>
                        <#if qo.endDate??>
                            $("#searchForm input[name='endDate']").val("${qo.endDate?string("yyyy-MM-dd")}");
                        </#if>
                        <#if qo.keyword??>
                              $("#searchForm input[name='keyword']").val("${qo.keyword}");
                        </#if>
                        <#if qo.groupType??>
                              $("#searchForm select[name='groupType']").val("${qo.groupType}");
                        </#if>
                    </#if>
                    //高级查询
                    $("#btn_query").click(function () {
                        $("#searchForm").submit();
                    });

                });
            </script>
            <table class="table table-striped table-hover" >
                <tr>
                    <th>编号</th>
                    <th>分组类型</th>
                    <th>客户新增数</th>
                </tr>
                <#list list as entity >
                <tr>
                    <td>${entity_index + 1}</td>
                    <td>${entity.groupType}</td>
                    <td>${entity.totalNumber}</td>
                </tr>
                </#list>
            </table>
        </div>
    </div>
</div>
<#--饼状图模态框-->
<div class="modal fade" id="barModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

<script>
    $(function () {
        /*柱状图*/
        //serialize获取表单中所有的参数
        $(".barBtn").click(function () {
            var url = "/customerEchart/queryBar.do?" + $("#searchForm").serialize();
            showModal(url);
        });
        $(".pieBtn").click(function () {
            var url = "/customerEchart/queryPie.do?" + $("#searchForm").serialize();
            showModal(url);
        });

        function showModal(url) {
            $("#barModal").removeData("bs.modal");
            $("#barModal").modal({
                show:"true",
                remote:url
            });
        }
    })
</script>
</body>
</html>